<template>
  <!--引用表格-->
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="addDepartRole">添加部门角色</a-button>
      <template v-if="selectedRowKeys.length > 0">
        <a-divider type="vertical"/>
        <a-dropdown>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="onDeleteDepartRoleBatch">
                <icon icon="ant-design:delete-outlined"/>
                <span>删除</span>
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>
            <span>批量操作 </span>
            <icon icon="akar-icons:chevron-down"/>
          </a-button>
        </a-dropdown>
      </template>
    </template>
    <!-- 插槽：行内操作按钮 -->
    <template #action="{ record }">
      <TableAction
          :actions="getTableAction(record)"
          :dropDownActions="getDropDownAction(record)"
      />
    </template>
  </BasicTable>
  <!-- 添加部门弹窗 -->
  <DepartRoleModal :departId="departId" @register="registerFormModal" @success="onFormModalSuccess"/>
  <DepartRoleAuthDrawer @register="registerAuthDrawer"/>
</template>

<script lang="ts" setup>
import { inject, ref, unref, watch, computed, onMounted } from 'vue'

import { ActionItem, BasicTable, TableAction } from '/@/components/Table'
import { useModal } from '/@/components/Modal'
import { useDrawer } from '/@/components/Drawer'
import { useListPage } from '/@/hooks/system/useListPage'

import DepartRoleModal from './DepartRoleModal.vue'
import DepartRoleAuthDrawer from './DepartRoleAuthDrawer.vue'
import { deleteBatchDepartRole, departRoleList } from '../depart.user.api'
import { departRoleColumns, departRoleSearchFormSchema } from '../depart.user.data'
import { ColEx } from '/@/components/Form/src/types'

const prefixCls = inject('prefixCls')
const props = defineProps({
  data: { require: true, type: Object },
})
defineEmits(['register'])
// 当前选中的部门ID，可能会为空，代表未选择部门
const departId = computed(() => props.data?.id)

// 自适应列配置
const adaptiveColProps: Partial<ColEx> = {
  xs: 24, // <576px
  sm: 24, // ≥576px
  md: 24, // ≥768px
  lg: 12, // ≥992px
  xl: 12, // ≥1200px
  xxl: 8, // ≥1600px
}
// 列表页面公共参数、方法
const { tableContext, createMessage } = useListPage({
  tableProps: {
    api: departRoleList,
    columns: departRoleColumns,
    canResize: false,
    formConfig: {
      schemas: departRoleSearchFormSchema,
      baseColProps: adaptiveColProps,
      labelAlign:"left",
      labelCol: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 9,
        xl: 7,
        xxl: 6,
      },
      wrapperCol: {},
      // 操作按钮配置
      actionColOptions: {
        ...adaptiveColProps,
        style: { textAlign: 'left' },
      },
    },
    // 请求之前对参数做处理
    beforeFetch(params) {
      params.deptId = departId.value
    },
  },
})

// 注册 ListTable
const [registerTable, {
  reload,
  setProps,
  setLoading,
  updateTableDataRecord,
}, { rowSelection, selectedRowKeys }] = tableContext

// 注册Form弹窗
const [registerFormModal, formModal] = useModal()
// 注册授权弹窗抽屉
const [registerAuthDrawer, authDrawer] = useDrawer()

// 监听 data 更改，重新加载数据
watch(() => props.data, () => reload())
onMounted(() => {
  reload()
})

// 清空选择的行
function clearSelection() {
  selectedRowKeys.value = []
}

// 添加部门角色
function addDepartRole() {
  formModal.openModal(true, {
    isUpdate: false,
    record: {},
  })
}

// 编辑部门角色
function editDepartRole(record) {
  formModal.openModal(true, {
    isUpdate: true,
    record: record,
  })
}

// 授权部门角色
function permissionDepartRole(record) {
  authDrawer.openDrawer(true, { record })
}

// 批量删除部门角色
async function deleteDepartRole(idList, confirm) {
  if (!departId.value) {
    createMessage.warning('请先选择一个部门')
  } else {
    setLoading(true)
    let ids = unref(idList).join(',')
    try {
      await deleteBatchDepartRole({ ids }, confirm)
      return reload()
    } finally {
      setLoading(false)
    }
  }
  return Promise.reject()
}

// 批量删除部门角色事件
async function onDeleteDepartRoleBatch() {
  try {
    await deleteDepartRole(selectedRowKeys, true)
    // 批量删除成功后清空选择
    clearSelection()
  } catch (e) {
  }
}

// 表单弹窗成功后的回调
function onFormModalSuccess({ isUpdate, values }) {
  isUpdate ? updateTableDataRecord(values.id, values) : reload()
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    { label: '编辑', onClick: editDepartRole.bind(null, record) },
  ]
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    { label: '授权', onClick: permissionDepartRole.bind(null, record) },
    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '确认要删除吗？',
        confirm: deleteDepartRole.bind(null, [record.id], false),
      },
    },
  ]
}
</script>
